<template>
  <div class="header_swiper">
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="item in swiperList" :key="item.id"><img :src="item.imgUrl"></swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
        <!--  <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-scrollbar" slot="scrollbar"></div> -->
    </swiper>
  </div>
</template>
<script>
export default {
  props:['swiperList'],
  data() {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
      }
    }
  },
}

</script>
<style type="text/css" scoped>
.header_swiper {
  background: #fff;
  height: 0px;
  padding-bottom: 26.67%;
}

.header_swiper img {
  width: 100%;
  height: auto;
}

.header_swiper>>>.swiper-pagination-bullet-active {
  background: #fff;
}

</style>
